<template>
    <div>
        <el-dialog title="新增" :visible.sync="info.isShow" @close="reset">
            <el-form :model="form" :rules="rules" ref="roleadd">
                <el-form-item label="角色名称" prop="rolename" :label-width="formLabelWidth">
                    <el-input v-model="form.rolename" placeholder="请输入角色名称" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="角色权限" :label-width="formLabelWidth" prop="menus">
                    <el-tree :data="menulist" v-model="form.menus" show-checkbox node-key="id" default-expanded-all
                        :props="defaultProps" ref="tree">
                    </el-tree>
                </el-form-item>


                <el-form-item label="角色状态" :label-width="formLabelWidth" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { mapActions, mapState } from "vuex"
export default {
    props: ["info"],

    computed: {
        ...mapState("menu", ["menulist"]),
        ...mapState("role", ["rolelist"]),
    },
    methods: {
        ...mapActions("role", ["getrolelist"]),
        ...mapActions("menu", ["getmenulist"]),
        reset() {
            this.info.isShow = false
            console.log("取消");
            // 清空表单信息
            this.form = {
                rolename: "",
                status: "",
                menus: ""
            }
            this.$refs.tree.setCheckedKeys([])
            // 使用表单的属性resetFields清空提示信息
            this.$refs.roleadd.resetFields()
        },
        submit() {
            // 判断如果表单中的值被选中和没被选的时候
            this.$refs.roleadd.validate(value => {
                if (value) {
                    // 获取选中的id
                    this.form.menus = this.$refs.tree.getCheckedKeys().join()
                    console.log(this.form.menus);
                    // 调用接口
                    let url = this.form.id > 0 ? "roleedit" : "roleadd"
                    console.log(url, 123312456645456);
                    this.$Api.roleaddabc(url, this.form).then(res => {
                        console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getrolelist()
                            // 调用reset取消函数
                            this.reset()
                        }
                    })
                    return
                }
            })


        },
        setInfo(roleadd) {
            this.form = {
                ...roleadd
            }
        }
    },
    mounted() {
        this.getmenulist()
    },
    data() {
        const valimenus = (rule, value, callback) => {
            if (this.$refs.tree.getCheckedKeys().length == 0) {
                callback(new Error("请选择权限"))
            } else {
                callback()
            }
        }
        return {
            form: {
                id: 0,
                rolename: "",
                status: "",
                menus: "",
            },
            rules: {
                rolename: { required: true, message: "请输入角色名称", trigger: "blur" },
                status: { required: true, message: "请选择状态", trigger: "blur" },
                menus: { required: true, message: "请选择角色权限", validator: valimenus, trigger: "blur" }
            },
            formLabelWidth: '120px',


            defaultProps: {
                children: 'children',
                label: 'title'
            }
        }

    }
}

</script>


<style leng='less' scoped>

</style>